import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Controls from '#cpt/temp/Controls'
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
import Delete from '#cpt/temp/Delete'
import Input from '@antd/form/input'
import Select from '@antd/form/select'
import './project-management.css'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const Modal 	= $Lazy.state(()=>import('@antd/modal'))
// ===================================================================== Lazy
// ===================================================================== component

class Index extends React.Component{
	state = {
		data:[],
		selectedKeys: [],
		// 搜索表单列表
		forms: [
			{ label: '公司项目',		name: 'kind_id',			type: 'select',		nameStr: 'kind_name' },
			{ label: '外包项目',		name: 'vendor_kind_id',	type: 'select',		nameStr: 'kind_name' },
		],
		selectData: {
			comp: [],
			vendor_comp: [],
			comp_kind: [],
			vendor_comp_kind: []
		},
		modalForm: {
			vendor_comp_id: $fn.query().vendor_comp_id, 
			vendor_project_id: $fn.query().vendor_project_id, 
			project_id: $fn.query().project_id,
			items: []
		}
	}
	
	componentDidMount(){
		const { vendor_comp_id, vendor_project_id, project_id } = $fn.query()
		this.query = { vendor_comp_id, vendor_project_id, project_id }
		this.fetch()
		this.getSelect()
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'lis-outsourcing-kind/index')
	
	// 获取下拉数据
	getSelect = () => {
		const { vendor_comp_id, project_id, vendor_project_id } = this.query
		const { forms } = this.state
		// 公司项目
		this.getSelectd({api: 'lis-outsourcing-kind/select', name: 'comp', param: { project_id }, callback: data => {
			$fn.setRow(forms, 'kind_id', data)
		} })
		// 分公司项目
		this.getSelectd({api: 'lis-outsourcing-kind/select', name: 'vendor_comp', param: { comp_id: vendor_comp_id, project_id: vendor_project_id }, callback: data => {
			$fn.setRow(forms, 'vendor_kind_id', data)
		} })
	}
	
	// 获取下拉数据
	getSelectd = (data) => {
		const { api, param, name, callback } = data
		$http.submit(null, api, { param, isPull:true }).then(data=>{
			const { selectData } = this.state
			selectData[name] = data
			this.setState({selectData}, () => callback?.(data))
		})
	}
	
	// 表格
	cols = [
		{ title: '公司', 			dataIndex: 'comp_name', 				width:100 },
		{ title: '分公司', 			dataIndex: 'vendor_comp_name', 			width:100 },
		{ title: '公司自然项目', 	dataIndex: 'parent_kind_name', 			width:150 },
		{ title: '分公司自然项目', 	dataIndex: 'vendor_parent_kind_name', 	width:150 },
		TableControls.controls.call(this, { width:100, align:'left'})
	]
	
	// 删除
	onDel = uuid => Delete.call(this, 'lis-outsourcing-kind/del', { uuid, isKeys: !uuid })
	
	// 表格操作按钮
	table_controls = (text, { is_default, uuid }) => {
		const { modalForm } = this.state
		return [
			TableControls.edit.call(this, 'lis-outsourcing-kind/info', { uuid }, {
				load: ({uuid, comp_id, vendor_comp_id, parent_kind_id, vendor_parent_kind_id, items}) => {
					this.comp_kindRef.setValue(parent_kind_id)
					this.vendor_comp_kindRef.setValue(vendor_parent_kind_id)
					this.setState({ modalForm: { ...modalForm, uuid, parent_kind_id, vendor_parent_kind_id, items: $fn.isArray(items) ? items : [] } })
					this.getSelectd({api: 'lis-outsourcing-kind/select', name: 'vendor_comp_kind', param: { kind_id: vendor_parent_kind_id, comp_id: this.query?.vendor_comp_id } })
					this.getSelectd({api: 'lis-outsourcing-kind/select', name: 'comp_kind', param: { kind_id: parent_kind_id }, callback: () => {}})
				}
			}),	
		]
	}
	
	// 操作按钮
	controls = () => {
		const { selectKeys } = this.state
		return [
			Controls.add.call(this),			// 添加
			this.onDel(selectKeys),						// 删除
			Controls.back.call(this)
		]
	}
	
	render(){
		const { selectData, modalForm } = this.state
		return (
			<>
				<Page title='项目管理' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				<Modal
					title	= '项目绑定'
					width 	= {1000}
					height  = {400}
					okText	= '保存'
					onRef	= { ref => this.modal = ref }
					loading = { this.state.submitLoading }
					isFullScroll
					onOk	= { () => {
						$http.submit(null, 'lis-outsourcing-kind/edit', { param: { ...modalForm } }).then(()=>{
							$fn.msg.success('保存成功')
							this.fetch()
							this.modal.close()
						})
					} }
					close	= { () => {
						const { selectData } = this.state
						const { vendor_comp_id, vendor_project_id, project_id } = this.query
						this.setState({ selectData: { ...selectData, comp_kind: [], vendor_comp_kind: [] }, modalForm: { vendor_comp_id, vendor_project_id, project_id, items: [] } })
						this.comp_kindRef.clear()
						this.vendor_comp_kindRef.clear()
					}}
				>
					<div style={{margin: '-15px -15px 0'}} className='fv ex pm'>
						<div style={{backgroundColor: '#F3F5F7'}} className='fx h40'>
							<div style={{width: '30%'}} className='pr10 fx'>
								<span className='b pr10 pl15'>公司项目</span>
								<div style={{width: 209, margin: 'auto 0'}}>
									<Select p='请选择公司项目' ref={ ref => this.comp_kindRef = ref } value={modalForm.parent_kind_id} nameStr='kind_name' data={selectData.comp} onChange={ value =>{
										if (value) {
											modalForm.items = []
											this.setState({ modalForm: { ...modalForm, parent_kind_id: value } })
											this.getSelectd({api: 'lis-outsourcing-kind/select', name: 'comp_kind', param: { kind_id: value }, callback: () => {
												selectData['comp_kind'].forEach(v => {
													modalForm.items.push({kind_id: v.value})
												})
											} })
										}
									}} />
								</div>
							</div>
							<div style={{width: '30%'}} className='pr10 fx'>
								<span className='b plr10'>外包项目</span>
								<div style={{width: 209, margin: 'auto 0'}}>
									<Select p='请选择公司项目' ref={ ref => this.vendor_comp_kindRef = ref } value={modalForm.vendor_parent_kind_id} nameStr='kind_name' data={selectData.vendor_comp} onChange={ value =>{
										if (value) {
											this.setState({ modalForm: { ...modalForm, vendor_parent_kind_id: value} })
											this.getSelectd({api: 'lis-outsourcing-kind/select', name: 'vendor_comp_kind', param: { kind_id: value, comp_id: this.query?.vendor_comp_id } })
										}
									}} />
								</div>
							</div>
							<span style={{width: '15%'}} className='b pl10'>外包默认值</span>
							<span style={{width: '25%'}} className='b pl10'>外包计算公式</span>
						</div>
						<div className='fvt'>
							{modalForm.items.map((v, i) => {
								return (
									<div className='ex fx h40' key={i}>
										<div style={{width: '30%'}} className='plr10 fx'>
											<Select p='请选择公司子项目' nameStr='kind_name' disabled={true} data={selectData.comp_kind} value={v.kind_id} />
										</div>
										<div style={{width: '30%'}} className='plr10 fx'>
											<Select p='请选择外包子项目' value={v.vendor_kind_id} nameStr='kind_name' data={selectData.vendor_comp_kind} onChange={ value =>{
												if (value) {
													modalForm.items[i].vendor_kind_id = value
													this.setState({modalForm})
												}
										}} />
										</div>
										<div style={{width: '15%'}} className='plr10 fx'>
											<Input value={v.default} onChange={ value =>{
												modalForm.items[i].default = value
												this.setState({modalForm})
										}} />
										</div>
										<div style={{width: '25%'}} className='plr10 fx'>
											<Input value={v.formula} onChange={ value =>{
												modalForm.items[i].formula = value
												this.setState({modalForm})
										}} />
										</div>
									</div>
								)
							})}
						</div>
					</div>
				</Modal>
			</>
		)
	}
}

export default Index